<template>
	<div id="app">
		<el-row type="flex" class="row-bg" justify="center">
			<el-tabs v-model="activeName">
				<el-tab-pane label="玩家 VS 玩家" name="PlayerVsPlayer"></el-tab-pane>
				<el-tab-pane label="玩家 VS  Ai" name="PlayerVsAi"></el-tab-pane>
				<el-tab-pane label="Ai  VS  Ai" name="AiVsAi"></el-tab-pane>
			</el-tabs>
		</el-row>
		<router-view :name='activeName' class="transition-box" />
	</div>
</template>
<script>
	export default {
		name: 'app',
		data() {
			return {
				activeName: 'PlayerVsAi',
			}
		},
	}
</script>
<style lang="scss">
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
	}
	body{
		background-image: url(img/bg-2.png);
	}
</style>
